<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="./css/daohang.css" !impotant>
<link rel="preconnect" href="http s://fonts,googleapis.com">
<link rel="preconnect" href="http s://fonts.gstatic.com"crossorigin>
<link href="https://fonts.googleapi s.com/css2?family=Poppins:wght@500;600;700&display=swap" rel="styleshe et">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<body>
<header>
    <input type="checkbox" name="check" id="check">
    <h1 class="logo">LOGO</h1>
    <nav class="nav">
    <h1 class="logo">logo</h1>
    <div class="divider"></div>
        <a href="#">任务1</a>
        <a href="#">任务2</a>
        <a href="#">仓库</a>
    </nav>
    <div class="user-form-group">
        <label for="check">
            <i class='bx bx-menu menu'></i>
            <i class='bx bx-x close-menu'></i>
        </label>
    </div>
</header>

      <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
      <link href="css/style.css" rel="stylesheet" />
      <link href="css/responsive.css" rel="stylesheet" />
         <section class="slider_section ">
            <div class="slider_bg_box">
               <img src="./images/图层 4.png">
            </div>
            <div id="customCarousel1" class="carousel slide" data-ride="carousel">
               <div class="carousel-inner">
                  <div class="carousel-item active">
                     <div class="container ">
                        <div class="row">
                  <div class="carousel-item">
                     <div class="container ">
                        <div class="row">
                           <div class="col-md-7 col-lg-6 ">
                              <div class="detail-box">
                                 <h1>
                                    <span>
                                    Sale 20% Off
                                    </span>
                                    <br>
                                    On Everything
                                 </h1>
                                 <div class="btn-box">
                                    <a href="" class="btn1">
                                    Shop Now
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!-- end slider section -->
      </div>


      <!-- product section -->
      <section class="product_section layout_padding">
         <div class="container">
            <div class="heading_container heading_center">
               <h2 style="color: black; font-size: 40px;">
                  Our <span>products</span>
               </h2>
            </div>
            <div class="row">
               <div class="col-sm-6 col-md-4 col-lg-4">
                  <div class="box">
                     <div class="option_container">
                        <div class="options">
                           <a href="" class="option1" >
                           Men's Shirt
                           </a>
                           <a href="" class="option2">
                           Buy Now
                           </a>
                        </div>
                     </div>
                     <div class="img-box">
                        <img src="images/p1.png" alt="">
                     </div>
                     <div class="detail-box">
                        <h5>
                           Men's Shirt
                        </h5>
                        <h6>
                           $75
                        </h6>
                     </div>
                  </div>
               </div>
               <div class="col-sm-6 col-md-4 col-lg-4">
                  <div class="box">
                     <div class="option_container">
                        <div class="options">
                           <a href="" class="option1">
                           Add To Cart
                           </a>
                           <a href="" class="option2">
                           Buy Now
                           </a>
                        </div>
                     </div>
                     <div class="img-box">
                        <img src="images/p2.png" alt="">
                     </div>
                     <div class="detail-box">
                        <h5>
                           Men's Shirt
                        </h5>
                        <h6>
                           $80
                        </h6>
                     </div>
                  </div>
               </div>
               <div class="col-sm-6 col-md-4 col-lg-4">
                  <div class="box">
                     <div class="option_container">
                        <div class="options">
                           <a href="" class="option1">
                           Add To Cart
                           </a>
                           <a href="" class="option2">
                           Buy Now
                           </a>
                        </div>
                     </div>
                     <div class="img-box">
                        <img src="images/p3.png" alt="">
                     </div>
                     <div class="detail-box">
                        <h5>
                           Women's Dress
                        </h5>
                        <h6>
                           $68
                        </h6>
                     </div>
                  </div>
               </div>
               <div class="col-sm-6 col-md-4 col-lg-4">
                  <div class="box">
                     <div class="option_container">
                        <div class="options">
                           <a href="" class="option1">
                           Add To Cart
                           </a>
                           <a href="" class="option2">
                           Buy Now
                           </a>
                        </div>
                     </div>
                     <div class="img-box">
                        <img src="images/p4.png" alt="">
                     </div>
                     <div class="detail-box">
                        <h5>
                           Women's Dress
                        </h5>
                        <h6>
                           $70
                        </h6>
                     </div>
                  </div>
               </div>
               <div class="col-sm-6 col-md-4 col-lg-4">
                  <div class="box">
                     <div class="option_container">
                        <div class="options">
                           <a href="" class="option1">
                           Add To Cart
                           </a>
                           <a href="" class="option2">
                           Buy Now
                           </a>
                        </div>
                     </div>
                     <div class="img-box">
                        <img src="images/p5.png" alt="">
                     </div>
                     <div class="detail-box">
                        <h5>
                           Women's Dress
                        </h5>
                        <h6>
                           $75
                        </h6>
                     </div>
                  </div>
               </div>
               <div class="col-sm-6 col-md-4 col-lg-4">
                  <div class="box">
                     <div class="option_container">
                        <div class="options">
                           <a href="" class="option1">
                           Add To Cart
                           </a>
                           <a href="" class="option2">
                           Buy Now
                           </a>
                        </div>
                     </div>
                     <div class="img-box">
                        <img src="images/p6.png" alt="">
                     </div>
                     <div class="detail-box">
                        <h5>
                           Women's Dress
                        </h5>
                        <h6>
                           $58
                        </h6>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      
  <link rel="stylesheet" type="text/css" media="all"
    href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="./css/vendor.css">
  <link rel="stylesheet" type="text/css" href="./css/style2.css">
</head>
    <div class="container">
      <div class="product-collection row">
        <div class="col-lg-7 col-md-12 left-content">
          <div class="collection-item">
            <div class="products-thumb">
              <img src="images/collection-item1.jpg" alt="collection item" class="large-image image-rounded">
            </div>
            <div class="col-md-6 product-entry">
              <h3 class="item-title-a"> blue
                clothes</h3>
              <div class="btn-wrap-a">
                <a href="shop.html" >Shop it Now 
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-5 col-md-12 right-content flex-wrap" >
          <div class="collection-item top-item">
            <div class="products-thumb">
              <img src="images/collection-item2.jpg" alt="collection item" class="small-image image-rounded">
            </div>
            <div class="col-md-6 product-entry">
              <h3 class="item-title">Basic shoes</h3>
              <div class="btn-wrap">
                <a href="shop.html">shop it now 
                </a>
              </div>
            </div>
          </div>
          <div class="collection-item bottom-item" style="margin-top: 8%;">
            <div class="products-thumb">
               <ul>
              <img src="images/collection-item3.jpg" alt="collection item" class="small-image image-rounded">
            </div>
            <div class="col-md-6 product-entry">
              <h3 class="item-title">woolen hat</h3>
              <div class="btn-wrap">
                <a href="shop.html">shop it now 
                </a>
              </div>
            </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
<br>
<br>
<div class="jiewei">
    <!-- 视频 -->
  <link rel="stylesheet" href="./css/kapian.css">
</head>
<div class="container5">
  <div class="card5">
    <div class="video">
      <video  width="400" height="300" controls>
        <source src="./images/sp.mp4" type="video/mp4">
        <source src="98.ogg" type="video/ogg">
        <source src="movie.webm" type="video/webm">
      </video></div>
      <div class="bottom-text">
          <div class="test">小组作业讲解
            <br>组长：吕帅帅 <br>组员：刘美希 邹淼涵 武文静 陈慧瑜 李治鸿
            <br>flex布局(任务1):邹淼涵 武文静<br> 响应式布局(任务2):吕帅帅 李治鸿
            <br>网站设计:刘美希 陈慧瑜
          </div>
        </div>
  </div>
</div>

<!-- 尾页 -->
<hr>
              <body>
               <body>
                  <link rel="stylesheet" href="./css/last2.css">
                  <div class="wrapper">
                     <div class="contact-main">
                         <div class="column">
                           <h3 class="header">Contacts</h3>
                           <p class="head-main">We’ll help with any questions you may have about marketing revolutionize your business.
                             <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur consequuntur eos totam
                             dolorem.</p>
                         </div>
                       </div>
                     </div>
               </body>
              <link rel="stylesheet" href="./css/foot.css">
                <ul class="wrapper">
                    <li class="icon facebook">
                      <span class="tooltip">Facebook</span>
                      <svg
                        viewBox="0 0 320 512"
                        height="1.2em"
                        fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
                        ></path>
                      </svg>
                    </li>
                    <li class="icon twitter">
                      <span class="tooltip">Twitter</span>
                      <svg
                        height="1.8em"
                        fill="currentColor"
                        viewBox="0 0 48 48"
                        xmlns="http://www.w3.org/2000/svg"
                        class="twitter"
                      >
                        <path
                          d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
                        ></path>
                      </svg>
                    </li>
                    <li class="icon instagram">
                      <span class="tooltip">Instagram</span>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        height="1.2em"
                        fill="currentColor"
                        class="bi bi-instagram"
                        viewBox="0 0 16 16"
                      >
                        <path
                          d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
                        ></path>
                      </svg>
                    </li>
                  </ul>
              </body>
          </div>
         </div>
      </div>
  </div>
</div>
</body>
</html>